<template>
  <div class="app-container">
    <el-button
      icon="el-icon-plus"
      type="primary"
      @click="showAdd"
    >{{ $t('add') }}
    </el-button>
    <el-table :data="secretList" style="width: 100%">
      <el-table-column prop="name" :label="$t('name')"  />
      <el-table-column prop="apiKey" :label="$t('apiKey')"  />
      <el-table-column prop="status" :label="$t('status')" >
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.status?'success':'danger'"
            @click="changeStatus(scope.row)"
            v-text="scope.row.status ? $t('enable'):$t('DISABLE')"
          />
        </template>
      </el-table-column>
      <el-table-column width="250" :label="$t('function')" >
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-s-ticket"
            @click="insertOrUpdateAndGetCompanySecretToken(scope.row)"
          >{{ $t('token') }}
          </el-button>
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="edit(scope.row)"
          >{{ $t('edit') }}
          </el-button>
          <el-button
            type="text"
            icon="el-icon-delete"
            @click="del(scope.row)"
          >{{ $t('delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="API"
      :visible.sync="dialogTableVisible"
    >
      <el-form
        label-width="120px"
      >
        <el-form-item :label="$t('name')">
          <el-input v-model="secret.name" />
        </el-form-item>
        <el-form-item :label="$t('apiKey')">
          <el-input
            v-model="secret.apiKey"
            disabled
          />
        </el-form-item>
        <el-form-item :label="$t('apiSecret')">
          <el-input
            v-model="secret.apiSecret"
            disabled
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="addOrUpdate">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogTokenVisible"
    >
      <el-form
        label-width="120px"
      >
        <el-form-item :label="$t('token')">
          <el-input v-model="secretToken.token" disabled />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTokenVisible = false">{{ $t('cancel') }}</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import { cancelNotice, formatDate, successNotice } from '@/util/common'
import {
  deleteCompanySecret,
  insertCompanySecret,
  listCompanySecret,
  updateCompanySecret
} from '@/api/auth/authCompanySecretApi'
import { insertOrUpdateAndGetCompanySecretToken } from '@/api/auth/authCompanySecretTokenApi'
import { getCompanyId, getShortCompanyName } from '@/util/storage'

export default {
  name: 'CompanySecret',
  data() {
    return {
      secretList: [],
      secret: {},
      dialogTableVisible: false,
      dialogTokenVisible: false,
      secretToken: {},
      companyId: getCompanyId(),
      companyName: getShortCompanyName()
    }
  },
  mounted() {
    const param = this.$route.query
    if (param !== null) {
      if (param.companyId) {
        this.companyId = param.companyId
        this.companyName = param.companyName
      }
    }
    this.listCompanySecret()
    this.setTagsViewTitle()
  },
  methods: {
    insertOrUpdateAndGetCompanySecretToken(item) {
      this.secret = item
      insertOrUpdateAndGetCompanySecretToken({
        secretId: this.secret.secretId
      }).then(res => {
        if (res.data) {
          this.secretToken = res.data
          this.dialogTokenVisible = true
        }
      })
    },
    setTagsViewTitle() {
      this.tempRoute = Object.assign({}, this.$route)
      const route = Object.assign({}, this.tempRoute, {
        title: `${this.companyName}`
      })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    formatDate(time) {
      return formatDate(this, time)
    },
    changeStatus(item) {
      const that = this
      this.$confirm(this.$t('change') + this.$t('status'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          updateCompanySecret({
            secretId: item.secretId,
            status: !item.status
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(this)
            }
            this.listCompanySecret()
          })
        })
    },
    del(index) {
      const that = this
      this.$confirm(this.$t('deletePrompt'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteCompanySecret({
            secretId: index.secretId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              that.listCompanySecret()
              successNotice(that)
            }
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    },
    edit(item) {
      this.secret = item
      this.dialogTableVisible = true
    },
    showAdd(item) {
      this.dialogTableVisible = true
    },
    listCompanySecret() {
      listCompanySecret({
        companyId: this.companyId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.secretList = data
        }
      })
    },
    addOrUpdate() {
      const json = {
        name: this.secret.name
      }
      if (this.secret.secretId) {
        json.secretId = this.secret.secretId
        updateCompanySecret(json).then(res => {
          const { code } = res
          if (code === '200') {
            this.listCompanySecret()
            this.dialogTableVisible = false
          }
        })
      } else {
        json.companyId = this.companyId
        insertCompanySecret(json).then(res => {
          const { code } = res
          if (code === '200') {
            this.listCompanySecret()
            this.dialogTableVisible = false
          }
        })
      }
    }
  }
}
</script>
<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.el-table .danger-row {
  background: #ff5d42;
}
</style>
